@import "utils";

.register-template {
  .mock-header {
    color: white;
    height: 6rem;
    display: flex;
    align-items: center;
    .brand {
      font-size: 2.25rem;
      font-family: "Inconsolata", monospace;
      font-weight: 700;
    }
    .light {
      margin-top: 8px;
      margin-left: 1rem;
      font-size: 1.25rem;
      font-weight: 600;
      color: $oc-gray-5;
      span {
        margin-right: 0.75rem;
      }
    }
    @include media("<=large") {
      width: 100%;
      height: 3.5rem;
      justify-content: center;
      background: $oc-violet-6;
      .light {
        color: rgba(255, 255, 255, 0.5);
      }
    }
    @include media("height<800px") {
      width: 100%;
      height: 3.5rem;
      justify-content: center;
      background: $oc-violet-6;
      .light {
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .rest {
    height: calc(100vh - 6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    .register-card {
      margin-top: -6rem;
      width: 512px;
      display: flex;
      flex-direction: column;
      @include material-shadow(3, 0.5);
      border-radius: 2px;
    }

    @include media("<=large") {
      height: calc(100vh - 4.5rem);
      .register-card {
        margin-top: 0;
        width: 100%;
        height: 100%;
      }
    }

    @include media("height<800px") {
      height: calc(100vh - 3.5rem);
      .register-card {
        margin-top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}
